<template>
	<view class="kaiCom">
        <view class="titleWrap flex">
            <view class="title font15 fontBold">周边配套</view>
            <view class="more flex font12 col-grey" @click="toMoreDeatil">
                <text class="right-3">查看更多</text>
                <u-icon name="arrow-right" color="#8A8A8A" size="12"></u-icon>
            </view>
        </view>
        <view class="aroundMsg top-15">
            <view class="msgItem col-link" @click="toAddress">
                <text class="col-grey">位置：</text>{{product.city}}{{product.area}}{{product.address}}
            </view>
        </view>
        <map class="mapBox top-20" id="mapCard" :latitude="latitude" :longitude="longitude" :markers="covers" :show-location="true" @markertap="bindMarker" @tap="toMoreDeatil" v-if="latitude">
        </map>
        <view class="btns">
            <view class="scrollBox top-20 flex">
                <block v-for="(item,index) in navs" :key="index">
                    <view class="btn" :class="curr == index ? 'active':''" @click="bindKeyword(item,index)">
                        <text class="name">{{item.name}}</text>
                    </view>
                </block>
            </view>
        </view>
        
        <view class="aroundList">
            <block v-if="resList.length > 0">
                <view :class="resList.length > 3 && !openList ? 'openBefore':'openAfter'">
                    <view class="itemBox top-10 flex" v-for="(item, index) in resList" :key="index">
                        <text class="name">{{item.title}}</text>
                        <view class="flex col-grey font13"><u-icon name="map" color="#8A8A8A" size="14"></u-icon>{{item.distance}}</view>
                    </view>
                </view>
                <view class="openBtn col-grey flex" @click="openList=true" v-if="!openList">
                    <text class="right-5 font13">展开全部</text><u-icon name="arrow-down" color="#8a8a8a" size="14"></u-icon>
                </view>
            </block>
            
            <block v-else>
                <view class="text-center">
                    没有找到结果
                </view>
            </block>
        </view>
	</view>
</template>

<script>
    var map;
    import { mapState, mapActions } from 'pinia';
    import { useConfigStore } from '@/store/index';
    import { mapNerbaySearch } from '@/common/api';
	export default {
        data() {
            return {
                map_: null,
                latitude: null,
                longitude: null,
                houseMaker: [],
                resList: [],
                covers: [],
                curr: 0,
                currKeyword: '地铁站',
                productId: null,
                currType: 'metro',
                navs: [{
                    name: '地铁',
                    value: '地铁站',
                    type: 'metro',
                    imageNor: 'https://image.srea.org.cn/xcx/icon/map-icon-metro-nor.png',
                    imageSel: 'https://image.srea.org.cn/xcx/icon/map-icon-metro-sel.png'
                },{
                    name: '公交',
                    value: '公交站',
                    type: 'bus',
                    imageNor: 'https://image.srea.org.cn/xcx/icon/map-icon-bus-nor.png',
                    imageSel: 'https://image.srea.org.cn/xcx/icon/map-icon-bus-sel.png'
                },{
                    name: '学校',
                    value: '学校',
                    type: 'school',
                    imageNor: 'https://image.srea.org.cn/xcx/icon/map-icon-school-nor.png',
                    imageSel: 'https://image.srea.org.cn/xcx/icon/map-icon-school-sel.png'
                },{
                    name: '医院',
                    value: '医院',
                    type: 'hospital',
                    imageNor: 'https://image.srea.org.cn/xcx/icon/map-icon-hospital-nor.png',
                    imageSel: 'https://image.srea.org.cn/xcx/icon/map-icon-hospital-sel.png'
                },{
                    name: '购物',
                    value: '购物:超市',
                    type: 'shopping',
                    imageNor: 'https://image.srea.org.cn/xcx/icon/map-icon-shopping-nor.png',
                    imageSel: 'https://image.srea.org.cn/xcx/icon/map-icon-shopping-sel.png'
                }],
                openList: false
            }
        },
        
		props: {
            product: {
                value: Object,
                default: {}
            }
		},
        
        computed:{
            ...mapState(useConfigStore, ['puid'])
        },
        
        mounted() {
            let { id='', puid='', title, lat, lng } = this.product;
            this.productId = id;
            if (puid) {
                this.setPuid(puid)
            }
            this.latitude = lat;
            this.longitude = lng;
            this.houseMaker = [{
                latitude: lat,
                longitude: lng,
                title: title,
                id: Number(id),
                width: 20,
                height: 30,
                callout: {
                    content: title,
                    padding: 4,
                    borderRadius:10,
                    display: 'ALWAYS'
                }
            }]
            const that = this;
            map = uni.createMapContext('mapCard', this);
            this.map_=map;
            
            uni.$check_and_login(function () {
                that.nearbySearch();
            })
        },
        
        methods:{
            ...mapActions(useConfigStore, ['setPuid']),
            //搜索附近配套
            nearbySearch(){
                const that = this;
                mapNerbaySearch({
                    productId: this.productId,
                    keyword: this.currKeyword
                }).then(res => {
                    if(res.detail == null) {
                        this.resList = [];
                        this.covers = [...this.houseMaker];
                        return
                    };
                    let dataList = res.detail.data;
                    let mks = [];
                    if(dataList.length > 0) {
                        dataList.sort(function(a, b){
                            return a._distance - b._distance
                        })
                        for (var i = 0; i < dataList.length; i++) {
                            mks.push({
                                title: dataList[i].title,
                                id: Number(dataList[i].id),
                                // #ifdef MP-WEIXIN || MP-BAIDU
                                iconPath: that.navs[that.curr].imageSel,
                                // #endif
                                latitude: dataList[i].location.lat,
                                longitude: dataList[i].location.lng,
                                distance: dataList[i]._distance,
                                width: 20,
                                height: 20,
                                callout: {
                                    content: dataList[i].title,
                                    padding: 4,
                                    borderRadius:10
                                }
                            })
                        }
                    }
                    that.resList = mks.length>10?mks.slice(0,10):mks;
                    that.covers = mks.concat(that.houseMaker);
                    if(map) {
                        map.moveToLocation({
                            longitude: that.longitude,
                            latitude: that.latitude
                        });
                        map.includePoints({
                            points: that.covers,
                            padding:[50, 50, 100, 50]
                        })
                    }
                })
            },
            
            //跳转地图
            toAddress(){
              if(this.product.lat > 0 && this.product.lng > 0){
                   uni.openLocation({
                     latitude: this.product.lat,
                     longitude: this.product.lng,
                   });
                }
            },
            
            //选择配套类型
            bindKeyword(item,index){
                this.currType = item.type;
                this.currKeyword = item.value;
                this.curr = index;
                this.nearbySearch();
            },
            
            //跳转周边配套
            toMoreDeatil(){
                uni.navigateTo({
                    url: `/pages/product/map/map-nearby?apiType=newHouse&type=metro&productId=${this.product.id}&title=${this.product.title}&lat=${this.product.lat}&lng=${this.product.lng}&puid=${this.puid}&prepage=楼盘详情页-${this.product.id}-${this.product.title}`
                })
            },

            //点击Marker气泡
            bindMarker(e) {
            }
        }
	}
</script>

<style lang="scss" scoped>
	.kaiCom{
        line-height: 1;
        margin: 50rpx 22rpx 0 22rpx;
        .titleWrap{
            justify-content: space-between;
        }
        .aroundMsg{
            line-height: 1.3;
        }
        .mapBox{
            width: 100%;
            height: 400rpx;
        }
        .btns{
            .scrollBox{
                justify-content: space-between;
                border-bottom: 1rpx solid rgba(0,0,0,.05);
                .btn{
                    padding-bottom: 20rpx;
                }
                .active{
                    font-weight: bold;
                    font-size: 30rpx;
                    border-bottom: 4rpx solid $theme-color;
                }
            }
        }
        .aroundList{
            line-height: 1.3;
            .itemBox{
                justify-content: space-between;
                align-items: flex-end;
            }
            .openBefore{
                height: 190rpx;
                overflow: hidden;
            }
            .openAfter{
                height: auto;
            }
        }
    }
</style>
